<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="description" content="张亚奇的web前端个人简历，路漫漫其修远兮。">
	<meta name="author" content="Avenstave">
	<meta name="fragment" content="!">
	<meta name="baidu-site-verification" content="UMMVJZAage" />
	<meta name="baidu_union_verify" content="db24f0b24d1c080a67b5c526855c875a">
	<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> -->
	<title>web前端工程师的简历</title>
	<link rel="stylesheet" type="text/css" href="jquery.fullPage.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.fullPage.js"></script>
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>
	<div class="music" onclick="playPause()">
		<img src="img/11.png" class="rota" id="music-iocn" alt="旋转">
		<audio id="audio1" autoplay="autoplay" preload loop="loop">
			<source src="Attention.mp3" type="audio/mp3" />

		</audio>
	</div>
	<script>
		var musiIocn = document.getElementById("music-iocn");
		var myAudio = document.getElementById('audio1');
		function playPause() {
			if (myAudio.paused) {
				myAudio.play();
				musiIocn.src = "http://texttomp3.com/img/shouye_bofangaoqiu.png"; //播放图片
				musiIocn.className = "rota";  //追加图片360旋转CSS3动画
			} else {
				myAudio.pause();
				musiIocn.src = "http://texttomp3.com/img/bofang.png";  //暂停图片
				musiIocn.className = "rota"; //取消图片360旋转CSS3动画
			}
		}
	</script>
	<div id="fullPage">
		<div class="section section1">
			<div class="box">
				<h1>Hello,I'm Gavin</h1>
				<h2> Where there is a will, there is a way.
				</h2>
				<p>
					<br>我叫Gavin，
					<br>一名前端开发工程师
				</p>

			</div>
		</div>
		<div class="section section2">
			<img src="img/touxiang.png" alt="touxiang">
			<p>
				<strong>-幸会，我是Gavin！</strong>
				<br> 一名前端攻城狮。打造一款成功的产品离不开持之以恒的照料，能成为你的搭档创造出别具一格的作品，我倍感荣幸。
				<br>
				<strong>-我能效劳</strong>
				<br> 前端开发，MVVM模块化开发，利用各种技巧实现交互丰富的界面。
				<br>
				<strong>-我掌握的</strong>
				<br> angular框架、vue框架、Nodejs、express、ionic4
				<br>
				<strong>-关于我</strong>
				<br> 坐标重庆
				<br> 不浮躁，执行力，学习能力都棒棒哒！目前，能做点设计
			</p>

		</div>
		<div class="section section3">
			<h1>skill:</h1>
			<div id="main" style="width: 1100px;height:900px;">
			</div>

		</div>
		<div class="section section4">
			<h1>我的经历</h1>
			<p class="wdjl-box">
				<strong>-2019年</strong>
				<br>我进入soul
				
				<br>
			</p>
		</div>
		<div class="section section5">
			<h1>我的作品</h1>
			<div class="row">
				<div class="column">
					<a href=""></a>
					<img src="img/benwz.png" class="primary">
					<h4 class="primary">本网站</h4>
				</div>
				<div class="column">
					<a href="">
						<img src="img/znhys.png" class="sport">
						<h4 class="sport">智能会议室系统</h4>
					</a>
				</div>
				<div class="column">
					<a href="">
						<img src="img/boke.png" class="edition">
						<h4 class="edition">博客</h4>
					</a>

				</div>
			</div>
		</div>
		<div class="section section6">
			<h1>CONTACT FOR ME</h1>
			<div class="bq">
				<p style="color: coral">灵感</p>
				<p style="color: skyblue">兴趣</p>
				<p style="color: cyan">梦想</p>
				<p style="color: darkgrey">未来</p>
			</div>

			<p class="p2" style="font-size:20px;margin-top: 5%;">
				学习是一个充实愉悦的过程
				<br /> 喜欢尝试，期待新鲜事物
				<br /> 前端即兴趣，兴趣即未来
				<br /> 行路有良友，便是捷径
				<br /> 期待有机会与您共事！
			</p>
			<div class="bottom">
				
				<p style="font-size: 12px">版权所有 ©2020 个人简介</p>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/move.js"></script>
	<script type="text/javascript">
		$(function () {
			$("#fullPage").fullpage({
				verticalCentered: false,
				anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
				navigation: true,
				afterLoad: function (link, index) {
					switch (index) {
						case 1:
							move('.section1 h1').scale(0.8).end();
							move('.section1 p').set('margin-top', '1%').end();

							break;
						case 2:
							move('.section2 img').set('margin-left', '1%').end();
							move('.section2 p').set('margin-left', '20%').end();

							break;
						case 3:
							move('.section3  h1').set('margin-right', '40%').scale(0.5).end();
							move('.section3  div').set('margin-left', '20%').scale(0.5).end();
							break;
						case 4:
							move('.section4 h1').set('margin-right', '20%').end();
							move('.section4 p').set('margin-left', '40%').end();
							break;
						case 5:
							move('.section5 img.primary').rotate(360).end(function () {
								move('.section5 img.sport').rotate(360).end(function () {
									move('.section5 img.edition').rotate(360).end(function () {

										move('.section5 h4.primary').scale(1.3).end(function () {
											move('.section5 h4.sport').scale(1.3).end(function () {
												move('.section5 h4.edition').scale(1.3).end();
											});
										});
									});
								});
							});
							break;
						case 6:
							move('.section6  h1').scale(1.2).end();
							move('.section6  p.p2').scale(1).end();
							break;
						default:

							break;
					}
				},
				onLeave: function (link, index) {
					switch (index) {
						case 1:
							move('.section1 h1').scale(1).end();
							move('.section1 p').set('margin-top', '100px').end();
							break;
						case 2:
							move('.section2 img').set('margin-left', '-1500px').end();
							move('.section2 p').set('margin-left', '1500px').end();
							break;
						case 3:
							move('.section3  h1').scale(1).end();
							move('.section3  div').set('margin-top', '-30%').scale(0.5).end();
							break;
						case 4:
							move('.section4 h1').set('margin-right', '-1500px').end();
							move('.section4 p').set('margin-left', '-1500px').end();
							break;
						case 5:
							move('.section5 img.primary').rotate(-360).end();
							move('.section5 img.sport').rotate(-360).end();
							move('.section5 img.edition').rotate(-360).end();
							move('.section5 h4.primary').scale(1).end();
							move('.section5 h4.sport').scale(1).end();
							move('.section5 h4.edition').scale(1).end();
							break;
						case 6:
							move('.section6  h1').scale(1.6).end();
							move('.section6  p.p2').scale(1.4).end();
							break;
						default:

							break;
					}
				},
				afterRender: function () {

				},
			});
		});
	</script>
	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		let dashedPic = '';
		let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
		let chartData = [{
			name: "JavaScript",
			value: 70,

		},
		{
			name: "html",
			value: 80,

		},
		{
			name: "css",
			value: 80,

		},
		{
			name: "TypeScript",
			value: 60,

		}
		];
		let arrName = [];
		let arrValue = [];
		let sum = 100;
		let pieSeries = [],
			lineYAxis = [];

		// 数据处理
		chartData.forEach((v, i) => {
			arrName.push(v.name);
			arrValue.push(v.value);
			// sum = sum + v.value;
		})

		// 图表option整理
		chartData.forEach((v, i) => {
			pieSeries.push({
				name: '技能',
				type: 'pie',
				clockWise: false,
				hoverAnimation: false,
				radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
				center: ["30%", "50%"],
				label: {
					show: false
				},
				data: [{
					value: v.value,
					name: v.name
				}, {
					value: sum - v.value,
					name: '',
					itemStyle: {
						color: "rgba(0,0,0,0)"
					}
				}]
			});
			pieSeries.push({
				name: '',
				type: 'pie',
				silent: true,
				z: 1,
				clockWise: false, //顺时加载
				hoverAnimation: true, //鼠标移入变大
				radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
				center: ["30%", "50%"],
				label: {
					show: false
				},
				data: [{
					value: 7.5,
					itemStyle: {
						color: "#E3F0FF"
					}
				}, {
					value: 2.5,
					name: '',
					itemStyle: {
						color: "rgba(0,0,0,0)"
					}
				}]
			});
			v.percent = (v.value / sum * 100).toFixed(1) + "%";
			lineYAxis.push({
				value: i,
				textStyle: {
					rich: {
						circle: {
							color: color[i],
							padding: [0, 5]
						}
					}
				}
			});
		})

		option = {
			//backgroundColor: '#fff',
			color: color,
			grid: {
				top: '15%',
				bottom: '54%',
				left: "30%",
				containLabel: false
			},
			yAxis: [{
				type: 'category',
				inverse: true,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					formatter: function (params) {
						let item = chartData[params];
						console.log(item)
						return '{line|}{circle|●}{name|' + item.name + '}{bd||}{percent|' + item.percent + '}{value|' + item.value + '}'
					},
					interval: 0,
					inside: true,
					textStyle: {
						color: "#333",
						fontSize: 14,
						rich: {
							line: {
								width: 170,
								height: 10,
								backgroundColor: { image: dashedPic }
							},
							name: {
								color: '#666',
								fontSize: 24,
							},
							bd: {
								color: '#ccc',
								padding: [0, 6],
								fontSize: 24,
							},
							percent: {
								color: '#333',
								fontSize: 24,
							},
							value: {
								color: '#333',
								fontSize: 26,
								fontWeight: 500,
								padding: [0, 0, 0, 20]
							},
							unit: {
								fontSize: 14
							}
						}
					},
					show: true
				},
				data: lineYAxis
			}],
			xAxis: [{
				show: false
			}],
			series: pieSeries
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>

</body>

</html>